<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  	<title>log测试</title>
  	<style type="text/css">
  		div {
  			margin: 100;
  			font-size: 66px;
  		}
  		.btn {
  			background-color: red;
  			width: 300px;
  			height: 100px;
  			margin: 50px;
  			font-size: 56px;
  		}
  	</style>
</head>
<body onclick="bodyfunc(event)">
	<div id="app">
		<div><input class="btn" type="radio" name="">啊</div>
		<div><input class="btn button" type="button" name="">按钮</div>
		<div><input class="btn button" type="submit" name="">submit按钮</div>
		<div><input class="btn submit" type="file" name="">file按钮</div>
		<div><textarea class="btn"></textarea></div>
		<div><select class="btn" value='阿阿'><option>haha</option></select></div>
		<div><input class="btn" type="checkbox" name=""></div>
		<div><input class="btn" type="text" name=""></div>
		<div>
		<button class="btn input" onclick="log1(event)">log123</button>
		</div>
		<div>
		<button class="btn" onclick="log2()">log456</button>
		</div>
		<div>
		<button class="btn" onclick="log3('789')">log789</button>
		</div>
	</div>
	<div id="result">结果</div>
</body>
	<script type="text/javascript">
		document.addEventListener('click', function(event){
			let target = event.target;
			if (target == document || target == window || target == document.documentElement || target == document.body) {
      			return
    		}
    		console.log('click');
			console.log(event);
		}, true);
		document.addEventListener('blur', function(event){
			console.log(event.target.tagName);
			console.log(event);
		}, true);
	  function bodyfunc(event) {
	  	console.log('body')
	  }

	  function log1(event){
	  	console.log(event)
	  	setResult('123');
	  	return 123;
	  }
	  function log2(){
	  	setResult('456');
	  	return '456';
	  }
	  function log3(value){
	  	setResult(value);
	  	return value;
	  }
	  function setResult(val){
	  	var el = document.getElementById('result');
	  	el.innerHTML = val;
	  }
	  function myfunction () {
		console.log('这是测试函数')
      }
	</script>
</html>